<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {post} from "@/util/axios.js";
import router from "@/router/index.js";
import {fetchUser, logout} from "@/components/userInfo.js";

const passwordForm = ref(null)

const form = reactive({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
})

const validatePassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    }
    // else if (value.length < 6) {
    //     callback(new Error('密码长度不能少于6位'))
    // }
    else {
        callback()
    }
}

const validateConfirmPassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== form.newPassword) {
        callback(new Error('两次输入密码不一致!'))
    } else {
        callback()
    }
}

const rules = reactive({
    oldPassword: [
        { required: true, validator: validatePassword, trigger: 'blur' }
    ],
    newPassword: [
        { required: true, validator: validatePassword, trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, validator: validateConfirmPassword, trigger: 'blur' }
    ]
})

const submitForm = () => {
    passwordForm.value.validate((valid) => {
        if (valid) {
            // 这里可以添加提交逻辑
            post('/user/updatePassword', {oldPsw:form.oldPassword , newPsw: form.newPassword  },  content => {
                resetForm()
                logout()
                fetchUser()
                router.replace('/login')
            })
        } else {
            ElMessage.error('请正确填写表单!')
            return false
        }
    })
}

const resetForm = () => {
    passwordForm.value.resetFields()
}
</script>

<template>
    <div class="password-change-container">
        <h2 class="title">修改密码</h2>

        <el-form
            ref="passwordForm"
            :model="form"
            :rules="rules"
            label-width="120px"
            class="password-form"
        >
            <el-form-item label="旧密码" prop="oldPassword">
                <el-input
                    v-model="form.oldPassword"
                    type="password"
                    placeholder="请输入当前密码"
                    show-password
                />
            </el-form-item>

            <el-form-item label="新密码" prop="newPassword">
                <el-input
                    v-model="form.newPassword"
                    type="password"
                    placeholder="请输入新密码"
                    show-password
                />
            </el-form-item>

            <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input
                    v-model="form.confirmPassword"
                    type="password"
                    placeholder="请再次输入新密码"
                    show-password
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
.el-input {
    height: 40px;
}
.password-change-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    width: 100%;
}

.title {
    margin-bottom: 30px;
    color: #333;
}

.password-form {
    width: 400px;
    max-width: 90%;
}
</style>